<template>
    <!-- 背景 -->
    <view class="bg">
        <!-- wrap: “包裹、环绕”  -->
        <view class="wrap">
            <!-- flex的包围容器 -->
            <view class="container">	
				<!-- 顶部安全区域占位 -->
				<view class="navbar" :style="{ paddingTop: safeAreaInsets.top-30 + 'px' }"></view>
                <!-- 顶部 -->
                <view class="header">	
                    <!-- 左边 -->
                    <view class="logo">
                        <image src="@/static/logo_hiack.png"></image>
                    </view>

                </view>

                <!-- 中上主图   banner-->
                <view class="page-gradient">
    
                      <!-- 用户信息区 -->
                      <view class="row-center">
                        <!-- 头像按钮（匹配 avatar-btn 样式） -->
                        <button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="setHead">
                          <image class="avatar" :src="userAvatar" mode="aspectFill"></image>
                        </button>
                      </view>
                      <!-- 用户名（匹配 info-font 样式） -->
                      <view class="row-center info-font">{{ userName }}</view>
                
                      <!-- 统计信息行（修复后） -->
                		<view class="row-center" style="margin-top: 15px; width: 80%;">
                		  <!-- 左侧：累计积分（对应原 van-col span="12"） -->
                		  <view class="row-center" style="width: 50%; flex-direction: column;">
                			<text v-if="pointSum >= 0" class="info-font positive">+{{ pointSum }}</text>
                			<text v-else class="info-font negative">{{ pointSum }}</text>
                			<text class="des-font" @click="showHistory" style="text-decoration: underline;">累计积分></text>
                		  </view>
                		  <!-- 右侧：总场次（对应原 van-col span="12"） -->
                		  <view class="row-center" style="width: 50%; flex-direction: column;">
                			<text class="info-font">{{ usagesCount }}</text>
                			<text class="des-font">总场次</text>
                		  </view>
                		</view> 
                    </view>


                <!-- 中下功能区-->
                <!-- <view class="info"></view> -->
				
				<!-- 设置选项区域 -->
				<view style="padding: 20rpx 30rpx;">
				  <!-- 头像/昵称设置组（匹配 round-top/round-bottom 样式） -->
				  <view class="setting-group round-top">
					  
					  
				    <!-- 头像设置项 -->
				    <view class="setting-item">
				      <view class="setting-left">
				        <text class="setting-icon">👤</text>
				        <text class="setting-title">头像</text>
				      </view>
				      <view class="setting-right">
				        <button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="setHead" style="width: 60px; height: 45px; border: 1px solid #fff; border-radius: 8px;">
				          <image class="avatar" :src="userAvatar" mode="aspectFill" style="width: 30px; height: 30px; margin-top: 0;"></image>
				        </button>
				        <text class="arrow">></text>
				      </view>
				    </view>
				    
					
					
				    <!-- 昵称设置项（匹配 input-style 样式） -->
				    <view class="setting-item">
				      <view class="setting-left">
				        <text class="setting-icon">📝</text>
				        <text class="setting-title">昵称</text>
				      </view>
				      <view class="setting-right">
				        <input 
				          class="input-style" 
				          placeholder="请输入昵称" 
				          type="nickname" 
				          :value="userName" 
				          @blur="setName" 
				          style="min-width: 120px;"
				        />
				        <text class="arrow">></text>
				      </view>
				    </view>
				  </view>
				
				
				
				  <!-- 清除历史数据组 -->
				  <view class="setting-group" >
				    <view class="setting-item">
						
				      <view class="setting-left">
				        <text class="setting-icon">🗑️</text>
				        <text class="setting-title">清除历史数据</text>
				      </view>
					  
					  
				      <view class="setting-right">
				        <text class="arrow">></text>
				      </view>
					  
				    </view>
				  </view>
				
				  <!-- 免责声明组（匹配 round-bottom 样式） -->
				  <view class="setting-group round-bottom">
				    <view class="setting-item" @click="showDisclaimer">
				      <view class="setting-left">
				        <text class="setting-icon">⚠️</text>
				        <text class="setting-title">免责声明</text>
				      </view>
				      <view class="setting-right">
				        <text class="arrow">></text>
				      </view>
				    </view>
				  </view>
				</view>


                <!-- 脚部 -->
                <!-- <view class="foot"></view> -->
				<!-- 弹窗定义 -->
				<!-- 免责声明弹窗 -->
				  <uni-popup ref="disclaimerPopup" type="bottom" :mask-click="false">
				    <view class="disclaimer-container">
				      <view class="disclaimer-header">
				        <text class="disclaimer-title">免责声明</text>
				        <button class="close-btn" @click="closeDisclaimer">关闭</button>
				      </view>
				      
				      <view class="disclaimer-content">
				        <view class="disclaimer-section">
				          <text class="section-title">1.信息收集与使用</text>
				          <text class="section-content">
				            本小程序不要求用户授权任何权限,不会后台收集用户的任何信息,对于用户上传的的头像,昵称经腾讯安全校验后保存在开发者服务器中,开发者不对此信息提供保密,保管义务,如果介意可使用系统提供的默认头像昵称,程序使用过程中产生的数据归开发者所有。
				          </text>
				        </view>
				        
				        <view class="disclaimer-section">
				          <text class="section-title">2.使用限制</text>
				          <text class="section-content">
				            本小程序仅供学习娱乐使用,请勿用于非法活动,由此产生的后果,开发者概不负责。
				          </text>
				        </view>
				        
				        <view class="contact-section">
				          <text class="contact-text">如有问题请联系</text>
				          <text class="contact-email" @click="copyEmail">admin@xtyu.top</text>
				        </view>
				      </view>
				    </view>
				  </uni-popup>
				
				  <!-- 历史记录弹窗 -->
				  <uni-popup ref="historyPopup" type="bottom" :mask-click="false">
				    <view class="history-container">
				      <view class="history-header">
				        <text class="history-title">历史记录</text>
				        <button class="close-btn" @click="closeHistory">关闭</button>
				      </view>
				      
				      <!-- 无数据提示 -->
				      <view v-if="userHistoryInfoDetails.length === 0" class="empty-history">
				        <text>暂无历史记录</text>
				      </view>
				      
				      <!-- 历史记录列表（匹配 image-container 样式） -->
				      <scroll-view v-else class="history-list" scroll-y>
				        <view 
				          v-for="(room, index) in userHistoryInfoDetails" 
				          :key="index"
				          class="history-item"
				        >
				          <view class="history-room-info">
				            <view style="display: flex; align-items: center;">
				              <image class="image-container" :src="room.mUserAvatar || userAvatar" mode="aspectFill"></image>
				              <text class="room-owner">{{ room.mUserName }}的房间</text>
				            </view>
				            <text class="room-time">{{ room.createTime }}</text>
				          </view>
				          <view class="history-score">
				            <text v-if="room.mUserPoint >= 0" class="score-positive">+{{ room.mUserPoint }}</text>
				            <text v-else class="score-negative">{{ room.mUserPoint }}</text>
				          </view>
				        </view>
				      </scroll-view>
				    </view>
				  </uni-popup>
				

				
				
				
				
            </view>
			
        </view>
		
    </view>

    <!-- 自定义底部导航栏 -->
    <customtabbar ></customtabbar>
	
	
	
</template>

<script setup>
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 引入自定义底部导航栏组件
import customtabbar from "@/components/customtabbar/customtabbar.vue";
import { ref } from 'vue';
// import { onLoad } from '@dcloudio/uni-app';
// import { SOCKET_SERVER_URL } from '@/config.js';
// 引入 Pinia 相关工具和 socketStore
// import { storeToRefs } from 'pinia';
// import { useSocketStore } from '@/stores/modules/socketStore.js';

// 初始化 socketStore
// const socketStore = useSocketStore();
// 如果需要使用响应式状态，可以解构（根据需要添加）
// const { 
//   connectionState,
//   isConnectedToRoom
// } = storeToRefs(socketStore);

// 初始化头像（默认图）和用户名
const userAvatar = ref('http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png'); // 替换为你的默认头像路径
const userName = ref('未设置昵称'); // 用户名也建议加默认值
const pointSum = ref(111); // 积分默认值（避免NaN显示）
const usagesCount = ref(222); // 总场次默认值



</script>

<style>
/* 背景样式设置 */
.bg {
        width: 100%;
        height: 100vh;
        background-image: 
            radial-gradient(closest-side, rgba(0, 153, 255, 0.5), rgba(255, 255, 255, 0)),
            radial-gradient(closest-side, rgba(102, 0, 204, 0.5), rgba(255, 102, 255, 0)),
            radial-gradient(closest-side, rgba(0, 255, 255, 0.5), rgba(153, 255, 255, 0)),  
            radial-gradient(closest-side, rgba(34, 139, 34, 0.5), rgba(124, 252, 0, 0)),  
            radial-gradient(closest-side, rgba(255, 0, 153, 0.5), rgba(255, 153, 255, 0));
        background-size: 
            130vmax 130vmax, 
            80vmax 80vmax, 
            90vmax 90vmax, 
            110vmax 110vmax, 
            90vmax 90vmax;
        background-position:
            -80vmax -80vmax, 
            60vmax -30vmax, 
            10vmax 10vmax,
            -30vmax -10vmax,
            50vmax 50vmax;
        background-repeat: no-repeat;
        animation: 3s movement linear infinite;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
}
/* 背景动画关键帧 */
@keyframes movement {
        0%,
        100% {
            background-size: 
                130vmax 130vmax, 
                80vmax 80vmax, 
                90vmax 90vmax, 
                110vmax 110vmax, 
                90vmax 90vmax;
            background-position:
                -80vmax -80vmax, 
                60vmax -30vmax, 
                10vmax 10vmax,
                -30vmax -10vmax, 
                50vmax 50vmax;
        }
        25% {
            background-size: 
                100vmax 100vmax, 
                90vmax 90vmax, 
                100vmax 100vmax, 
                90vmax 90vmax, 
                60vmax 60vmax;
            background-position:
                -60vmax -90vmax, 
                50vmax -40vmax,
                0vmax -20vmax,
                -40vmax -20vmax,
                40vmax 60vmax;
        }
        50% {
            background-size:
                80vmax 80vmax, 
                110vmax 110vmax, 
                80vmax 80vmax, 
                60vmax 60vmax, 
                80vmax 80vmax;
            background-position:
                -50vmax -70vmax, 
                40vmax -30vmax, 
                10vmax 0vmax, 
                20vmax 10vmax, 
                30vmax 70vmax;
        }
        75% {
            background-size: 
                90vmax 90vmax, 
                90vmax 90vmax, 
                100vmax 100vmax, 
                90vmax 90vmax, 
                70vmax 70vmax;
            background-position:
                -50vmax -40vmax, 
                50vmax -30vmax, 
                20vmax 0vmax,
                -10vmax 10vmax, 
                40vmax 60vmax;
        }
}
/* 背景伪元素样式 */
.bg::after {
        width: 100%;
        height: 100%;
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        z-index: -2;
}

/* 外部包围|顶层样式设置 */
.wrap{
        width: 100%;
        min-height: 80vh;
        /* background-color: black; */
    }

/* 容器样式设置 */
.container{
        width: 90%;
        min-height: 80vh;
        margin: auto;
        /* background-color: yellowgreen; */
}
	
/* 顶部占位符 */
.navbar{
/* 		background-size: cover;	
		position:relative; display:flex;
		flex-direction:column; */
		/* padding-top:20px; */
		/* z-index: 3; */
		/* background-color: green; */
}
	
	
/* 头部样式设置 */
.header{
        /* background-color: grey; */
        width: 100%;
        height: 100rpx;
        margin-top: 40rpx;	
        display: flex;
        align-items: center;
        justify-content: space-between	
    }

/* 头部 logo 样式 */
.logo{
        width: 270rpx;
        height: 100rpx;
    }

/* 头部 logo 图片样式 */
.logo image{
        width: 100%;
        height: 100%;
        /* 平铺 */
    }

/* 头部角色图标样式 */
.role{
        width: 100rpx;
        height: 100rpx;
    }

/* 头部角色图标图片样式 */
.role image{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* 身体样式设置——大图 */
.banner{
        width: 100%;
        height: 700rpx;
        margin-top: 40rpx;
        /* background-color: aquamarine; */
    }

/* 身体大图图片样式 */
.banner image{
        width: 100%;
        height: 100%;
        /* 平铺？  占满？   flex的属性？ */
        object-fit: cover;
    }

/* 身体样式设置——选项卡*/
.info{
        width: 100%;
        height: 550rpx;
        border-radius: 60rpx;/* 圆角 */
        /* background-color:black; */
        /* 透明 */
        background-color: rgba(255, 255, 255, 0.2);
        /* margin-top: 40rpx; */
        display: flex;
        /* 设置主轴方向 */
        flex-direction: row;
        /* 在主轴方向的对齐方式 */
        justify-content: space-around;
        flex-wrap: wrap;
    }

/* 选项栏容器 */
.info_item{
        /* background-color: aquamarine; */
        width: 30%;
        height: 40%;
        /* margin: auto; */
        /* background-color: rgba(255, 255, 255, 0.5); */
        display: flex;		
        flex-direction: column;
        align-items: center;
        /* align-content: center; */
        justify-content: space-around;
        padding: 15rpx;
        /* 圆角 */
        border-radius: 80rpx;
        transition: all 0.3s ease;
    }

/* 分享按钮悬停特效 */
.info_item:hover {
        transform: scale(1.1);
        opacity: 0.8;
    }

/* 放icon的容器 */
.icon{
        width: 200rpx;
        height: 200rpx;	
    }

/* icon图片本身 */
.icon image{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* 自定义字体 */
@font-face {
        font-family: 'fontali'; 
        src:url('@/static/font/DingTalk-JinBuTi.woff') format('woff');
}

/* 选项卡文字样式 */
.text{
        /* flex的项目属性,1代表一个参数属性flex是简写:按剩余空间弹性扩展 */
        flex:1;
        color: cadetblue;
        padding-left: 20rpx;
        font-family: 'fontali';  
}

/* 脚部样式设置 */
.foot{
        width: 100%;
        height: 80rpx;
        position: absolute;
        bottom: 70rpx; 
}

/* 底部栏样式 */
.footer {
        background-color: black;
        text-align: center;
        /* padding: 20rpx 0; */
}

/* 底部栏分割线样式 */
.footer-divider {
        width: 45%;
        height: 1rpx;
        background-color: #ccc;
        margin: 10rpx auto;
}		

/* 底部栏图标容器样式 */
.footer-icons {
        display: flex;
        justify-content: center;
        margin-bottom: 1rpx;
}		

/* 底部栏图标样式 */
.footer-icon {
        width: 40rpx;
        height: 40rpx;
        margin: 0 10rpx;
    }		

/* 底部栏版权信息样式 */
.footer-copyright {
        font-family: 'Roboto', sans-serif; /* 使用Roboto字体，你可以替换为其他你喜欢的字体 */
        font-size: 12px;
        letter-spacing: 1.7px; /* 增加字母间距 */
        line-height: 1.8; /* 增加行高，实现上下间距更大 */
        color: #cfcfcf;
    }
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
/* 新增 */
.page-gradient {
  /* background: linear-gradient(to bottom, #89c1f5, #f2f2f2); */
  padding-top: 10%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}


.row-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}


.avatar {
	
  width: 90px; /* 与按钮宽高匹配（按钮100px，留10px内边距） */
  height: 90px;
  border-radius: 50%; 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border: 1px solid #000000;
  object-fit: cover; /* 防止图片拉伸变形 */ 
  /* margin-top: 23%; */
  /* width: 80px; */
  /* height: 80px; */
}
.avatar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: transparent;
  border: none;
  outline: none;
  position: relative;
  border-radius: 50%;
  border: 1px solid #ffffff;
}
.info-font {
  font-size: 20px;
  font-weight: bold;
  margin-top: 8px;
  color: rgb(36, 36, 35);
}

.des-font {
  color: silver;
  font-size: 14px;
  margin-top: 4px;
}


















/* 设置组 */
.setting-group {
  background: white;
  overflow: hidden;
  margin-bottom: 20px; /* 新增：每个group下方固定20px间距，避免拥挤 */
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.setting-icon {
  font-size: 20px;
}

.setting-title {
  font-size: 16px;
  color: #333;
}

.setting-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>